<template>
  <div class="container">
    <div class="header">
      <img v-lazy="require('@/assets/logo.png')" @click="gocollection"/>
      <p>user123</p>
      <div class="setup" @click="go()">
        <van-icon name="setting-o" size="30" color="#fff" />
      </div>
    </div>

    <div class="order">
      <div class="flex_r_b pd10">
        <p>我的订单</p>
        <p>全部订单 ></p>
      </div>
      <van-grid>
        <van-grid-item icon="idcard" text="待付款" />
        <van-grid-item icon="newspaper-o" text="待发货" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="completed" text="已完成" />
      </van-grid>
    </div>

    <div class="coupon">
      <div class="flex_r_b pd10">
        <p>我的优惠卷</p>
        <p>全部优惠卷 ></p>
      </div>
      <van-grid direction="vertical" :column-num="3">
        <van-grid-item icon="photo-o">
          <img src="../../assets/img/yhq1.png" />
          <p>待使用</p>
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <img src="../../assets/img/yhq2.png" />
          <p>已使用</p>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/img/yhq3.png" />
          <p>过期关闭</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="options">
      <van-cell title="我的收藏" icon="star-o"  is-link />
      <van-cell title="收货地址" icon="location-o" is-link @click="this.$router.push('/myAddress')" />
      <van-cell title="服务中心" icon="friends-o" is-link />
    </div>
  </div>
</template>
<script>
export default {

  methods:{
      gocollection(){
          this.$router.push("/login")
          
      },
      go(){
        this.$router.push('/set')
      }
  }

};
</script>
<style lang="scss" scoped>
.pad10 {
  padding: 0 10px;
}
.container {
  background-color: #f2f2f2;
}
.header {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #fb4041;
  text-align: center;
  box-sizing: border-box;
}
.header img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  margin-top: 30px;
}
.header p {
  color: white;
  font-size: 16px;
  margin-top: 6px;
}
.setup {
  position: absolute;
  top: 5px;
  right: 5px;
}
.order,
.coupon {
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
}

// .order_my,
// .coupon_my {
//   display: flex;
//   justify-content: space-between;
//   //   width: 100%;
//   height: 30px;
//   line-height: 10px;
//   //   border: 1px solid #ccc;
// }

.coupon img {
  width: 30px;
}
.options {
  margin-top: 10px;
}
</style>